<!-- eslint-disable no-use-before-define -->
<!--
 * @Description: 更新群头像昵称（通过更改个人信息来同步）
 * @Author: Kerwin
 * @Date: 2023-11-29 11:16:12
 * @LastEditTime: 2024-01-25 13:05:31
 * @LastEditors:  Please set LastEditors
-->
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/store'
import { userApi } from '@/api'
import { getImgFullPath } from '@/utils'
import { upload } from '@/common/ali-oss'
import { base64ToFile, wxUploadFile } from '@/utils/common'
import hyImageCropper from '../../components/hy-image-cropper/hy-image-cropper.vue'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const showPop = ref(false)
async function onChooseAvatar(e: { detail: { avatarUrl: any } }) {
  const { avatarUrl } = e.detail
  userInfo.value.avatar = avatarUrl
  console.log('url', e, avatarUrl)
  // #ifdef H5
  upload({
    filePath: avatarUrl,
    onSuccess: async (e) => {
      const { data } = await userApi.userInfoUpdate({
        avatar: url
      })
    },
    onError() {
      uni.showToast({
        title: '上传失败'
      })
    }
  })
  // #endif
  // #ifdef MP-WEIXIN
  const res = await wxUploadFile(avatarUrl)
  successFn(res.data)
  // #endif
}
const avatarTempUrl = ref('')
function onChooseImage() {
  uni.chooseImage({
    count: 1,
    success(res) {
      avatarTempUrl.value = res.tempFiles[0].path
      // res.tempFiles[0]
    }
  })
}
async function successFn(url: any) {
  await userApi.userInfoUpdate({
    avatar: url
  })
  await userStore.getUserInfo()
}
async function updateNickname(e: { detail: { value: any } }) {
  await userApi.userInfoUpdate({
    nickname: e.detail.value
  })
  await userStore.getUserInfo()
}
function submit() {
  showPop.value = false
}
function uploadImage(file: any) {
  upload({
    file,
    onSuccess: async (ret: { url: any }) => {
      successFn(ret.url)
    },
    onError() {
      uni.showToast({
        title: '上传失败'
      })
    }
  })
}
async function cutConfirm(e: any) {
  // #ifdef H5
  const file = base64ToFile(e.detail.tempFilePath, `${new Date()}`)
  uploadImage(file)
  // #endif
  // #ifdef MP-WEIXIN
  const res = await wxUploadFile(e.detail.tempFilePath)
  successFn(res.data)
  // #endif
}
function cutCancel() {
  avatarTempUrl.value = ''
}
onLoad(() => {
  if (!userStore.userInfo?.avatar) {
    setTimeout(() => {
      showPop.value = true
    }, 500)
  }
})
</script>
<template>
  <view>
    <u-popup
      v-model="showPop"
      mode="center"
      width="298px"
      closeable
      border-radius="20"
      close-icon-color="#666"
      close-icon="close-circle"
      close-icon-size="40"
      :mask-close-able="false"
      :z-index="3"
    >
      <view class="pop-head">
        <view class="head-con">
          <view class="pop-tit">完善信息</view>
        </view>
      </view>
      <view class="pop-body">
        <u-cell-group>
          <u-cell-item title="头像" hover-class="cell-hover-class">
            <!-- #ifdef H5 -->
            <button class="customBtn" @click="onChooseImage"></button>
            <u-avatar :src="getImgFullPath(userInfo?.avatar)"></u-avatar>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <button
              class="customBtn"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            ></button>
            <u-avatar
              :src="getImgFullPath(userInfo?.avatar)"
              v-if="userInfo?.avatar"
            ></u-avatar>
            <!-- #endif -->
          </u-cell-item>
          <u-cell-item title="昵称" hover-class="cell-hover-class">
            <input
              type="nickname"
              v-model="userInfo.nickname"
              maxlength="20"
              @change="updateNickname"
            />
          </u-cell-item>
        </u-cell-group>
        <u-button
          class="btn"
          @click="submit"
          shape="circle"
          type="primary"
          ripple
          :custom-style="{ background: '#ff522d', height: '70rpx' }"
          >保存</u-button
        >
      </view>
    </u-popup>
    <hy-image-cropper
      :src="avatarTempUrl"
      @cancel="cutCancel"
      @confirm="cutConfirm"
    ></hy-image-cropper>
  </view>
</template>

<style lang="scss" scoped>
.pop-head {
  position: relative;
  padding: 30rpx 0 0 0;
  .head-con {
    width: 100%;
    .pop-tit {
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
    }

    .des {
      padding: 20rpx;
      font-size: 24rpx;
    }
  }
}

.pop-body {
  padding: 30rpx;
  .btn {
    margin-top: 30rpx;
  }
  .customBtn {
    padding: 0;
    border: 0;
    background-color: inherit;
    position: absolute;
    top: 0;
    right: 0;
    width: 200rpx;
    height: 100%;
    z-index: 1;
    opacity: 0;

    &:after {
      border: none;
    }
  }
}
</style>
